<script setup>
import { updateFacultiesById } from '@/api/admin/depart.js'
import { ref, computed, defineProps, defineEmits, defineExpose } from 'vue'
import { ElNotification } from 'element-plus'

import rules from '@/rules/depart.js'

let props = defineProps(['modelValue'])
let emit = defineEmits(['update:modelValue', 'reset'])

let flag = computed({
  get() {
    return props.modelValue
  },
  set(nv) {
    // console.log(nv)
    emit('update:modelValue', nv)
  },
})

let params = ref({
  department_id: '',
  department_name: '',
})

let editForm = ref(null)

const updateNewDepart = async function () {
  await editForm.value.validate()
  await updateFacultiesById(params.value)
  ElNotification.success({
    title: `“${this.params.department_name}”更新成功`,
  })
  emit('reset')
  params.value = {
    department_id: '',
    department_name: '',
  }
  console.log(flag)

  flag.value = false
}

const clearDialog = function () {
  params.value = {
    department_name: '',
  }
  editForm.value.clearValidate()
}

defineExpose({
  params,
})
</script>

<template>
  <el-dialog v-bind="$attrs" v-model="flag" @close="clearDialog">
    <template #header>
      <span>新院系添加</span>
    </template>

    <el-form
      class="form"
      label-width="80px"
      :inline="false"
      :rules="rules"
      :model="params"
      ref="editForm"
    >
      <el-form-item label="院系ID:">
        <el-input :model-value="params.department_id" readonly></el-input>
      </el-form-item>
      <el-form-item label="院系名:" prop="department_name">
        <el-input v-model="params.department_name"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="primary" @click="updateNewDepart()">更新</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.form {
  padding: 20px 40px;
}
.time-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.time-row .el-select {
  flex-grow: 1;
}
:deep(.el-date-editor) {
  width: 100%;
}
</style>
